<?php
global $base_path;
$node = $items['node'];
$num = count($node->field_exp_photos[LANGUAGE_NONE]);
?>
<script type="text/javascript">
  var delete_btn_label = "<?php print('Delete'); ?>";
  var delete_btn_confirm = "<?php print('Are you sure you want to delete this photo?'); ?>";
</script>
<div class="row">
  <div class="span3">
    <h2>
        <?php print t("Photos");?>
    </h2>
    <p>
      <?php print t("Now make your listing beautiful!");?>
    </p>
    <hr class="ns">
    <div style="margin-left: 20px">
    <form accept-charset="UTF-8" action="/jquery_file_upload/upload/<?php print $node->nid; ?>"
      class="edit_trip" enctype="multipart/form-data" id="upload_photos" method="post">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="?">
          <input name="authenticity_token" type="hidden" value="Om4feaFuKMbQU6ALrgsi4r4EKfsKddY/Y+7B/GEngvA=">
        </div>
        <?php if($num < 10): ?>
        <span class="btn btn-primary fileinput-button" style="width: 130px; height: 19px; margin-bottom:4px;">
          <i class="icon-plus icon-white">
          </i>
          <span>
            <?php print t("Add Photo");?>
          </span>
          <input data-url="/jquery_file_upload/upload/<?php print $node->nid; ?>"
          id="photo-file-upload" name="files[]" style="height: 60px;" type="file">
        </span>
        <?php endif; ?>
      </form>
    </div>
  </div>
  <div class="span6">
    <ul>
      <li>
        <?php print t("Add up to 10 high quality photos of your experience. The bigger the better but not more than 2MB each.");?>
      </li>
      <li>
        <?php print t("The first photo is your cover photo.");?>
      </li>
    </ul>
  </div>
</div>


<div class="modal hide fade" id="in-progress-modal" style="display: none;"
aria-hidden="true">
    <div class="modal-body">
        <p>
          <?php print t("Adding photos...");?>
        </p>
        <div class="progress progress-striped active" id="progress-modal" style="min-width: 130px;">
            <div class="bar" style="width: 100%;">
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a aria-hidden="true" class="btn" data-dismiss="modal" href="#">
          <?php print t("Cancel");?>
        </a>
    </div>
</div>



<div class="row media-photo-list">
    <div class="span9">
        <ul class="thumbnails ui-sortable" data-order-photo-url="/experiences-edit/5842-walk-along-binhai-road/order_photo"
        id="photos" style="min-height:100px; margin-left:60px;">
        <?php foreach($node->field_exp_photos[LANGUAGE_NONE] as $index => $photo): ?>
            <?php 
              if($index == 0){
                $image_url = image_style_url('610x343', $photo['uri']);
              }else{
                $image_url = image_style_url('290x163', $photo['uri']);
              } 
            ?>
            <li class="ui-state-default" >
                <div class="thumbnail">
                  <img class="photo-link" src="<?php print $image_url; ?>"
                    style="min-width:290px; min-height:163px;cursor: pointer;">
                  <div class="hover-state">
                      <div class="hover-bottom">
                          <a href="<?php print $base_path . "experiences/media/".$node->nid."/delete/".$index ?>"
                           data-method="delete"
                          rel="nofollow">
                          <?php print t("Delete");?>
                          </a>
                      </div>
                  </div>
                </div>
            </li>
        <?php endforeach;?>
        </ul>
    </div>
</div>


<form accept-charset="UTF-8" action="<?php print $base_path . "experiences/media/".$node->nid."/save" ?>"
class="form-inline" id="update_trip" method="post">
    <div class="row">
        <div class="span10 offset1">
            <div class="framed2">
                <div class="framed2-header">
                    <h2>
                        <?php print t("Video");?>
                    </h2>
                    <p>
                      <?php print t("Videos are worth a billion words. Make your experience stand out by adding a link to a YouTube or Vimeo video.");?>
                    </p>
                </div>
                <div class=" control-group">
                    <label class="control-label">
                    </label>
                    <div class="controls">
                        <input class="w620" id="trip_video_url" name="video_url" placeholder="Link to video (YouTube or Vimeo) (Optional)"
                        size="30" type="text" value="<?php print $node->field_exp_video[LANGUAGE_NONE][0]['value']; ?>">
                        <input class="btn btn-primary" id="trip_submit" name="commit" type="submit"
                        value="<?php print t('Save');?>">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
